<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="mytag" uri="/WEB-INF/tag/tag.tld" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://www.layuicdn.com/layui-v2.5.6/css/layui.css">
    <link rel="stylesheet" href="/ncpsy/static/css/style.css">
    <title>终端管理</title>
    <style>
        h2 {
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
<div class="layui-container">
    <div class="page-header">
        <h1 class="title">${mamName}</h1>
    </div>
    <div class="table-container">
        <div class="table-content">
            <div class="table-card-body">
                <!--<div class="table-tools">
                  <button type="button" class="layui-btn getAllBtn">全部</button>
                  <button type="button" class="layui-btn getNOHandleBtn">待处理</button>
                  <button type="button" class="layui-btn getHandleBtn">已处理</button>
                </div>-->
                <table id="list" lay-skin="line" lay-filter="list" lay-data="{id: 'accountTable'}"></table>
                <small>点击单元格可编辑内容</small>
            </div>
        </div>
    </div>

</div>


<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script>
<script src="https://www.layuicdn.com/layui-v2.5.6/layui.js"></script>

<script type="text/html" id="accountHandler">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="update">提交修改</button>
        <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="delete">删除</button>
    </div>
</script>

<script>

    // var rid = localStorage.getItem('rid');
    // if (rid === -1) {
    //   rid = 3
    // }
    var rid = ${rId}; // 3 表示商超
    const BASE_URL = '/ncpsy';

    let ncpData = [{
        "qyid":"qy002","zh":"222","mm":"","qymc":"222","dz":null,"fzr":null,"dh":null,"yx":null,"bz":null,"rid":2
    }];

    let tableNcp;
    layui.use(['table', 'laypage', 'layer'], async function () {
        var table = layui.table,
            laypage = layui.laypage,
            layer = layui.layer;
        await  getAccountList(rid).then(data => {
            ncpData = data
        }).catch(err => {
            console.log(err)
        });
        //渲染表格
        tableNcp = table.render({
            elem: '#list',
            id: 'accountTable',
            data: ncpData,
            skin: 'line',
            page: true,
            // toolbar: 'default',
            cols: [[
                {field: 'qyid', title: '企业ID', sort: true},
                {field: 'qymc', title: '企业名称'},
                {field: 'zh', title: '账号', sort: true},
                {field: 'mm', title: '密码', edit: 'text'},
                {field: 'dz', title: '联系地址', edit: 'text'},
                {field: 'dh', title: '联系方式', edit: 'text'},
                {field: 'yx', title: '邮箱', edit: 'text'},
                {field: 'fzr', title: '负责人', edit: 'text'},
                {field: 'bz', title: '备注', edit: 'text'},
                {title: '操作', fixed: 'right', width: 150, align:'left', toolbar: '#accountHandler'}
            ]]
        });
        // 监听表格行的详情、编辑删除时间
        table.on('tool(list)', function (obj) {
            var data = obj.data;
            let layEvent = obj.event;
            if(layEvent === 'delete'){ //删除
                layer.confirm('账户删除后不可恢复，确定删除账户吗？', function(index){
                    // 向服务端发送删除指令
                    deleteAccountInfo(data.qyid).then(res => {
                        layer.msg(res.message);
                        obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                        layer.close(index);
                    }).catch(err => {
                        layer.close(index);
                        layer.error(err.message)
                    })
                });
            } else if(layEvent === 'update'){ //确认处理
                layer.confirm('确定提交编辑吗？', function(index){
                    // 提交修改后的账户信息
                    updateAccountInfo(data).then(res => {
                        layer.close(index);
                        layer.msg(res.message);
                    }).catch(err => {
                        layer.close(index);
                        layer.error(err.message)
                    })
                });
            }
        });

        // 监听表格单元格编辑
        table.on('edit(list)', function(obj){ //注：edit是固定事件名，test是table原始容器的属性 lay-filter="对应的值"
            // console.log(obj.value); //得到修改后的值
            // console.log(obj.field); //当前编辑的字段名
            // console.log(obj.data); //所在行的所有相关数据
        });


        function promptMsg() {
            layer.msg('同上', {
                icon: 1,
                time: 2000 //2秒关闭（如果不配置，默认是3秒）
            }, function(){
                //do something
            });
        }
    });

    // 获取供货商账户列表
    function getAccountList(rid) {
        return new Promise((resolve, reject) => {
            $.ajax({
                url: BASE_URL + '/queryQyAll/' + rid,
                type: 'get',
                contentType: 'application/json;charset=utf-8;',
                success: function (res) {
                    resolve(res.data);
                },
                error(err) {
                    reject(err)
                }
            })
        })
    }
    // 删除供货商账户信息
    function deleteAccountInfo(qyid) {
        return new Promise((resolve, reject) => {
            $.ajax({
                url: BASE_URL + '/deleteQyById//' + qyid,
                type: 'post',
                contentType: 'application/json;charset=utf-8;',
                success: function (res) {
                    resolve(res);
                },
                error(err) {
                    reject(err)
                }
            })
        })
    }
    // 编辑供货商账户信息
    function updateAccountInfo(data) {
        return new Promise((resolve, reject) => {
            $.ajax({
                url: BASE_URL + '/updateQy',
                type: 'post',
                contentType: 'application/json;charset=utf-8;',
                data: JSON.stringify(data),
                success: function (res) {
                    resolve(res);
                },
                error(err) {
                    reject(err)
                }
            })
        })
    }

</script>
</body>
</html>
